/*
 * @Author: aleimu
 * @Date: 2021-03-08 09:36:50
 * @Description: file content
 */


import React, { useEffect, useState, useRef } from 'react';
import ReactDOM from 'react-dom';
import { Tag, Input, Tooltip } from 'antd';

// export default ({ value, onChange, color, maxLength = 20 }) => {
function Default({ value, onChange, color, maxLength = 20 }) {

    function calculateDaysBetweenDates(date1, date2) {
    }

    const [inputVisible, setInputVisible] = useState(false);
    const [inputValue, setInputValue] = useState();
    const [tags, setTags] = useState(value || []);
    const inputRef = useRef();

    useEffect(() => setTags(value || []), [value]);
    useEffect(() => {
        if (inputVisible && inputRef.current) {
            inputRef.current.focus();
        }
    }, [inputVisible]); useEffect(() => {
        if (inputVisible && inputRef.current) {
            inputRef.current.focus();
        }
    }, [inputVisible]);

    const onClose = i => () => {
        tags.splice(i, 1);
        onChange([...tags]);
    };

    const showInput = () => setInputVisible(true);

    const handleInputChange = e => setInputValue(e.target.value);

    const handleInputConfirm = () => {
        setInputValue('');
        setInputVisible(false);

        if (inputValue && tags.indexOf(inputValue) === -1) {
            onChange([...tags, inputValue]);
        }
    };

    return (
        <div>
            {tags.map((o, i) => {
                const isLong = o.length > maxLength;
                const tagElm = (
                    <Tag key={o} color={color} closable onClose={onClose(i)}>
                        {isLong ? `${o.slice(0, 20)}...` : o}
                    </Tag>
                );

                return isLong ? (
                    <Tooltip title={o} key={o}>
                        {tagElm}
                    </Tooltip>
                ) : (
                    tagElm
                );
            })}
            {inputVisible && (
                <Input
                    ref={inputRef}
                    type="text"
                    size="small"
                    style={{ width: 78 }}
                    value={inputValue}
                    onChange={handleInputChange}
                    onBlur={handleInputConfirm}
                    onPressEnter={handleInputConfirm}
                />
            )}
            {!inputVisible && (
                <Tag
                    style={{
                        background: '#fff',
                        borderStyle: 'dashed',
                    }}
                    onClick={showInput}>
                    <h3 /> 新增
                </Tag>
            )}
        </div>
    );
};
function TextInputWithFocusButton() {
    const inputEl = useRef(null);
    const onButtonClick = () => {
        // `current` 指向已挂载到 DOM 上的文本输入元素
        inputEl.current.focus();
    };
    return (
        <>
            <input ref={inputEl} type="text" />
            <button onClick={onButtonClick}>Focus the input</button>
        </>
    );
}


export default (
    <div>
        {/* <Default value={123} onChange={123} color={'red'} /> */}
        <TextInputWithFocusButton />,
    </div>
)


